<template>
  <el-card class="custom-domain-container" v-loading="stepData.isAjaxing">
    <div>
      <div class="custom-domain-card-header">
        <h3>旧码域名设置</h3>
        <h4>数量上限：不限</h4>
        <el-button type="primary" size="small" plain @click="stepData.showBindDomainDialog = true">添加域名</el-button>
      </div>
      <div class="live-code-header-btn" v-if="stepData.isTrue">
        <el-dropdown>
          <el-button size="mini" plain>
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="delData('2')">删除选中</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-table :data="stepData.tableData" @selection-change="handleSelectionChange" :max-height="stepData.tableMaxHeight">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="domain" label="域名" show-tooltip-when-overflow>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <span v-if="row.state == 1" class="table-state-yes">已生效</span>
            <span v-else class="table-state-no">未生效</span>
            <img src="/img/table-operate-images/update.png" alt="update" v-if="!row.testing" @click="checkState(row)"/>
            <i class="el-icon-loading" v-else></i>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <img src="/img/table-operate-images/delete_icon.png" alt="delete_icon" @click="delData(row,'1')">
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div class="empty-box">
            <img class="empty-img" src="/img/404-images/empty.png" alt="暂无内容">
            <div>未绑定专属域名，点击 <span class="primary-text" @click="stepData.showBindDomainDialog = true">添加域名</span> 按钮可直接绑定</div>
          </div>
        </template>
      </el-table>

      <el-dialog title="绑定域名" v-model="stepData.showBindDomainDialog" width="524px" @close="accomplish">
        <el-steps :active="stepData.procedure" finish-status="success" v-if="stepData.procedure !== 0">
          <el-step></el-step>
          <el-step></el-step>
          <el-step></el-step>
        </el-steps>

        <div class="bind-domain-tips" v-if="stepData.procedure === 0">
          绑定须知
          <p>
            1. 支持绑定备案及未备案域名<br>
            2. 请输入带http://或https://的域名，末尾不要带有/<br>
            3. 如有问题，请联系域名的管理者来辅助完成域名绑定
          </p>
        </div>

        <div class="bind-domain-input" v-else-if="stepData.procedure === 1">
          <el-alert type="warning" show-icon>
            <template #title>
              请确保该域名没有绑定任何的网站<br>
              完成绑定后，创建的短链形式为：你的域名/xxxx
            </template>
          </el-alert>
          <el-form ref="domainFormRef" label-width="80px" label-position="top" :rules="stepData.domainFormRules" :model="stepData.addFromData">
            <el-form-item label="你的域名" prop="domain">
              <el-input placeholder="请输入带http://或https://的域名，例如：http://www.1zt.com" v-model.trim="stepData.addFromData.domain">
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="bind-domain-info" v-else-if="stepData.procedure === 2">
          <p>还差一步完成绑定</p>
          <div class="bind-domain-cname">请前往域名DNS管理后台将{{ stepData.addFromData.domain }}添加解析记录。</div>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" size="mini" @click="lastStep" v-if="stepData.procedure === 1">上一步</el-button>
            <el-button type="default" size="mini" @click="stepData.showBindDomainDialog = false" v-if="stepData.procedure === 0">取消</el-button>
            <el-button type="primary" size="mini" @click="nextStep" v-if="stepData.procedure === 0">下一步</el-button>
            <el-button type="primary" size="mini" @click="accomplish" v-if="stepData.procedure === 2">完成</el-button>
            <el-button type="primary" size="mini" @click="bindDomain" v-if="stepData.procedure === 1">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!--    <el-pagination-->
    <!--      background-->
    <!--      @size-change="handleSizeChange"-->
    <!--      @current-change="handleCurrentChange"-->
    <!--      :current-page="stepData.query.page"-->
    <!--      :page-sizes="[10, 30, 50, 100]"-->
    <!--      :page-size="stepData.query.limit"-->
    <!--      layout="total, sizes, prev, pager, next, jumper"-->
    <!--      :total="stepData.total">-->
    <!--    </el-pagination>-->
  </el-card>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { addDomainApi, oldDomainListApi, domainListApi, delDomainApi, judgeIsEffective } from '@/axios/userRequest'
const { proxy } = getCurrentInstance()

const stepData = reactive({
  tableData: [],
  tableMaxHeight: window.innerHeight - 203,
  showBindDomainDialog: false,// 绑定域名对话框
  procedure: 0,// 步骤进度
  showLastStepBtn: false,// 显示上一步
  showNextStepBtn: true,// 显示下一步
  isTrue:false, //控制批量按钮
  addFromData:{ //添加域名弹框
    domain:'',
    type:1,
    domain_type:4,
    host_record:'@'
  },
  domainFormRules:{
    domain:[
      {
        required: true,
        validator:(rule, value, callback)=>{
          if(value){
            let urlReg = /^https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})$/
            !urlReg.test(value) ? callback('域名输入有误') : callback()
          }else{
            callback('请输入你的域名')
          }
        },
        trigger: ['blur', 'change']
      }
    ]
  },
  twoDomain:'',
  query:{
    type:[4],
    // page:1,
    // limit:10
  },
  total:0,
  deleteData:[],
  isAjaxing:true
})
const resizeHeight = ()=> stepData.tableMaxHeight = window.innerHeight - 203
onMounted(()=> window.addEventListener('resize', resizeHeight))
onUnmounted(()=> window.removeEventListener('resize', resizeHeight))
//页面初始化方法
let init = async ()=> {
  let {data: res, msg, code} = await oldDomainListApi(stepData.query)
  if (code != 0) return proxy.$message.error(msg)
  stepData.isAjaxing = false;
  stepData.tableData = res.data[4]
  // let {data:res,msg,code} = await domainListApi(stepData.query)
  // if(code !=0) return proxy.$message.error(msg)
  // stepData.isAjaxing = false;
  // stepData.total = res.total
  // stepData.tableData = res.data
}
init()
// 上一步
const lastStep = () => {
  stepData.procedure--
  stepData.procedure <= 0 ? stepData.procedure = 0 : ''
}
// 下一步
const nextStep = async() => {
  stepData.showLastStepBtn = true
  stepData.procedure++
  stepData.procedure > 1 ? stepData.procedure = 1 : ''
}
// 绑定域名
const bindDomain = ()=>{
  proxy.$refs.domainFormRef.validate(async validate=>{
    if(validate){
      let { msg,code } = await addDomainApi(stepData.addFromData)
      if(code != 0) return proxy.$message.error(msg)
      proxy.$message.success(msg)
      stepData.procedure++
      await init()
    }
  })
}
// 检测状态是否生效
const checkState = row=>{
  row.testing = true
  judgeIsEffective({ id: row.id}).then(res=>{
    if(res.code === 0){
      row.state = 1
      proxy.$message.success(res.msg)
    }else if(res.code === -1) {
      row.state = 0
      proxy.$message.error(res.msg)
    }
    row.testing = false
  }).catch(err=>{})
}
// 表格选中
let handleSelectionChange = val=>{
  stepData.isTrue = val.length == 0 ? false : true
  stepData.deleteData = val.map(item =>{
    return item.id
  })
}
//删除方法
let delData = (row,type)=>{
  proxy.$confirm('此操作将永久删除, 是否继续?', '提示', {
    customClass:'commonMessageBox',
    type: 'warning'
  }).then(async() => {
      let { code, msg } = await delDomainApi({ id:type === '1' ? [row.id] : stepData.deleteData })
      if(code != 0) return proxy.$message.error(msg)
      proxy.$message.success(msg)
      await init()
    }).catch(() => {
      proxy.$message.info('已取消删除')
    })
}

// 添加弹框关闭，初始化页面及数据
let accomplish =()=>{
  stepData.showBindDomainDialog = false
  stepData.procedure = 0
  stepData.showNextStepBtn = true
  stepData.showLastStepBtn = false
  stepData.addFromData.domain = ''
  stepData.addFromData.type = 1
  stepData.addFromData.host_record = '@'
  stepData.twoDomain = ''
}

// const handleSizeChange = (val) => {
//   stepData.query.limit = val
//   stepData.query.page = 1
//   init()
// }
//
// const handleCurrentChange = (val) => {
//   stepData.query.page = val
//   init()
// }
</script>

<style lang="less" scoped>
.custom-domain-container {
  height: 100%;
  border-radius: 52px 12px 12px 12px;

  &:deep(.el-card__body){
    padding-left: 32px;
    height: 100%;
    box-sizing: border-box;
  }

  .custom-domain-card-header {
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    h3, h4 {
      display: inline-block;
      margin: 0;
      letter-spacing: 0.4px;
    }

    h3 {
      color: @title;
      font-size: 18px;
      margin-right: 18px;
    }

    h4 {
      font-size: 14px;
      color: @secondary;
      margin-left: 12px;
    }

    .el-button {
      margin-left: 60px;
    }
  }

  .el-table{
    img{
      cursor: pointer;
      vertical-align: middle;
    }
    i.el-icon-loading{
      color: @tips-text;
      font-size: 18px;
      vertical-align: middle;
    }
    .table-state-yes{
      color: @success;
      margin-right: 10px;
    }
    .table-state-no{
      color: @danger;
      margin-right: 10px;
    }
    &:before {
      background-color: transparent;
    }
  }

  &:deep(.el-dialog){
    .el-dialog__body {
      .el-steps {
        margin-bottom: 40px;
        .el-step__head {
          .el-step__line {
            margin: 0 25px 0 53px;
            top: 16px;
          }
          .el-step__icon {
            width: 33px;
            height: 33px;
            font-size: 14px;
          }
        }
      }
      .el-alert {
        font-size: 12px;
        margin: 0 0 32px;
      }
      .bind-domain-tips {
        font-weight: bold;
        font-size: 12px;
        letter-spacing: 0.4px;
        color: @subtitle;
        opacity: 0.7;
        span {
          color: @title;
        }
        p {
          margin-top: 16px;
          line-height: 24px;
        }
      }

      .bind-domain-input, .bind-domain-info {
        p {
          font-size: 14px;
          line-height: 18px;
          letter-spacing: 0.4px;
          color: #3D3D3D;
          opacity: 0.7;
          margin: 0;
        }
      }

      .bind-domain-input {
        .el-alert {
          line-height: 6px;
        }
        .el-form {
          .el-form-item {
            margin-bottom: 9px;
            .el-form-item__label {
              padding-bottom: 9px;
              line-height: unset;
            }
          }
        }
      }
      .bind-domain-info {
        p {
          color: @title;
          font-weight: bold;
        }

        .bind-domain-cname {
          margin: 6px 0 10px;
          font-size: 12px;
          color: rgba(148, 148, 148, 0.85);
        }
      }
    }

    .el-dialog__footer {
      .dialog-footer {
        width: 100%;
        height: 25px;
        display: flex;
        position: relative;
        padding-top: unset;
        justify-content: flex-end;
        margin: 10px;
      }
    }
  }
}
</style>
